<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-col :span="2" class="colStyle">当前审批中</el-col>
          <el-col :span="2" class="colStyle">本月审批通过</el-col>
          <el-col :span="2" class="colStyle">本月审批驳回</el-col>

        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="2" class="colStyle">{{ currApproveCount }}</el-col>
          <el-col :span="2" class="colStyle">{{ approveCount }}</el-col>
          <el-col :span="2" class="colStyle">{{ rejectionCount }}</el-col>

        </el-row>
      </el-card>

      <el-card style="margin-top: 20px;">
        <el-row>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="30"
            />
            <el-table-column
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              label="审批类型"
              prop="processName"
              sortable
              width="120"
            />
            <el-table-column
              prop="username"
              label="申请人"
              sortable
              width="120"
            />
            <el-table-column
              prop="procCurrNodeUserName"
              sortable
              label="当前审批人"
            />
            <el-table-column
              prop="procApplyTime"
              sortable
              label="审批发起时间"
            />
            <el-table-column
              prop="processState"
              sortable
              label="审批状态"
            >
              <template slot-scope="scope">
                {{ statusList[scope.row.processState] }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="selInfo(scope.row.processId,scope.row.processKey)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;text-align: center;">
            <el-pagination
              :page-size="20"
              :pager-count="11"
              layout="prev, pager, next"
              :total="queryParams.total"
            />
          </div>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getProcessList } from '@/api/approval'
export default {
  name: 'Approvals',
  data() {
    return {
      tableData: [],
      multipleSelection: [],

      queryParams: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      currApproveCount: 0, // 当前审批数
      approveCount: 0, // 审批通过数
      rejectionCount: 0, // 审批驳回数
      statusList: ['已提交', '审批中', '审批通过', '审批不通过', '撤销'] // （0已提交；1审批中；2审批\r\n通过；3审批不通过；4撤销）
    }
  },

  async created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await getProcessList(this.queryParams)
      console.log('approvals - List', res)

      this.currApproveCount = res.currApproveCount
      this.approveCount = res.approveCount
      this.rejectionCount = res.rejectionCount
      this.queryParams.total = res.total
      this.tableData = res.rows
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selInfo(id, type) {
      this.$router.push({
        path: `/approval/${type}/detail/${id}`
      })
    }
  }
}
</script>

<style scoped>
  .colStyle{
    text-align: center;
  }
</style>
